<template>
  <div class="container">
    <Category title="美食" :listData="foods" >
      <img slot="center" class="img" :src="img" alt="图片">
      <div slot="footer" class="foot">
        <a href="http://www.atguigu.com">更多美食</a>
      </div>
    </Category>

    <Category title="游戏" >
      <ul slot="center">
        <li v-for="(g, index) in games" :key="index">{{g}}</li>
      </ul>
      <div slot="footer" class="foot">
        <a href="http://www.atguigu.com">单击游戏</a>
        <a href="http://www.atguigu.com">网络游戏</a>
      </div>
    </Category>

    <Category title="电影" :listData="films" >
      <video slot="center" class="video" :src="video" controls ></video>
      <!-- 结合template 才能使用的新写法 v-slot:xxx-->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.atguigu.com">经典</a>
          <a href="http://www.atguigu.com">动作</a>
          <a href="http://www.atguigu.com">爱情</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from "./components/Category"

  export default {
    name: "App",
    components: {
      Category
    },
    data() {
      return {
        foods: ['火锅', '烧烤', '小龙虾', '牛排'],
        games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
        films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》'],
        img: "https://s3.ax1x.com/2021/01/16/srJlq0.jpg",
        video: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      }
    }
  };
</script>

<style>
  .container {
    display: flex;
    justify-content: space-around;
  }
  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .img,
  .video {
    width: 100%;
  }
  .foot {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }
</style>